<template>
  <div v-show="showSignData" class="container">
    <transition name="dialog-fade">
      <div v-if="showSignData" class="sign-data">
        <button class="close-btn" @click="toShowSignData"></button>
        <ul class="sign-data-list">
          <li class="item" v-for="(item, index) in imgDataList" :key="index">
            <img :src="item.imgPath" alt="" @click="openDtl(item.imgPath)">
          </li>
        </ul>
      </div>
    </transition>
    <signDtl :showDtl="showDtl" :dtlImgSrc="dtlImgSrc" @toShowDtl="toShowDtl"></signDtl>
    <div class="sign-bg-img">
      <div class="sign-data-bg1"></div>
      <div class="sign-data-bg2"></div>
      <div class="sign-data-bg3"></div>
      <div class="sign-data-bg4"></div>
    </div>
  </div>
</template>

<script>

import signDtl from '@/components/signDtl'
import { mapGetters } from 'vuex'

export default {
  name: 'signData',
  props: ['showSignData'],
  data () {
    return {
      signDataList: [],
      showDtl: false,
      dtlImgSrc: ''
    }
  },
  components: {
    signDtl
  },
  computed: {
    ...mapGetters(['imgDataList'])
  },
  methods: {
    toShowSignData () {
      this.$emit('showSignData')
    },
    toShowDtl () {
      this.showDtl = !this.showDtl
    },
    openDtl (imgSrc) {
      this.dtlImgSrc = imgSrc
      this.showDtl = true
    }
  },
  created () {},
  mounted () {
    /* var signDataList = []
    for (var i = 0; i < 100; i += 1) {
      signDataList.push({
        name: '1',
        imgSrc:
          'https://oimagea3.ydstatic.com/image?id=1733557029632259911&product=adpublish&w=640&h=480&sc=0&rm=2&gsb=0&gsbd=60'
      })
    }
    this.signDataList = signDataList */
  }
}
</script>
<style lang="scss" scoped>
.container {
  position: absolute;
  z-index: 3;
  .sign-data {
    width: 653px;
    height: 988px;
    background: url(../assets/images/data-list-bg.png) no-repeat;
    background-size: 100% 100%;
    z-index: 4;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    top: 110px;
    padding: 60px 0 60px 58px;

    .close-btn {
      position: absolute;
      right: -10px;
      top: -68px;
      width: 69px;
      height: 69px;
      background: url(../assets/images/close-btn.png) no-repeat;
      background-size: 100% 100%;
    }

    .sign-data-list {
      overflow-y: scroll;
      width: 540px;

      &::-webkit-scrollbar {
        width: 0px;
      }
      &::-webkit-scrollbar {
        display: none;
      }
      &::-webkit-scrollbar {
        background-color: transparent;
      }
      .item {
        display: inline-block;
        width: 124px;
        height: 124px;
        background: url(../assets/images/data-bg.png) no-repeat;
        background-size: 100% 100%;
        margin-right: 14px;
        margin-bottom: 16px;
        text-align: center;
        line-height: 124px;
        img {
          width: 88px;
          height: 88px;
        }
      }
      .item:nth-of-type(4n) {
        margin-right: 0;
      }
    }
  }

  .sign-bg-img {
    @keyframes sign-data-bg1-animate {
      0% {
        transform: translateX(300%);
      }
      100% {
        transform: translateX(-100%);
      }
    }

    @keyframes sign-data-bg2-animate {
      0% {
        left: 48%;
        opacity: 0.8;
      }
      50% {
        left: 20%;
        opacity: 0.3;
      }
      100% {
        opacity: 1;
        left: -14%;
      }
    }

    @keyframes sign-data-bg3-animate {
      0% {
        left: 11px;
      }
      10% {
        left: -14%;
        opacity: 0;
      }
      10.01% {
        left: 100%;
        opacity: 1;
      }
      100% {
        left: 11px;
      }
    }

    .sign-data-bg1 {
      position: absolute;
      // left: 387px;
      top: 45px;
      width: 188px;
      height: 76px;
      background: url(../assets/images/bg1.png) no-repeat;
      background-size: 100% 100%;
      animation: sign-data-bg1-animate 30s linear infinite;
    }

    .sign-data-bg2 {
      position: absolute;
      // left: 337px;
      top: 84px;
      width: 205px;
      height: 126px;
      background: url(../assets/images/bg2.png) no-repeat;
      background-size: 100% 100%;
      animation: sign-data-bg2-animate 24s linear infinite;
    }

    .sign-data-bg3 {
      position: absolute;
      // left: 11px;
      top: 416px;
      width: 120px;
      height: 49px;
      background: url(../assets/images/bg3.png) no-repeat;
      background-size: 100% 100%;
      animation: sign-data-bg3-animate 30s linear infinite;
    }
    .sign-data-bg4 {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 750px;
      height: 420px;
      background: url(../assets/images/bg4.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
